<template>
<div @click="goArticle" >

        <img :src="detailItem.img" alt="" style="width:100%;height:41.333vw;border-bottom: 1px solid #999;" >

        <div class="count">
            <span class="play_num"><van-icon name="play-circle-o" style="padding-right:1.033vw;" />999</span>
            <span class="praise_num"><van-icon name="chat-o" style="padding-right:1.333vw;" />
                <b v-if="detailItem.commentlen">{{detailItem.commentlen}}</b>
                <b v-else>--</b>    
            </span>
        </div>
        <p class="title">{{detailItem.name}}</p>
            
        

</div>
</template>

<script>

   

export default {
    data() {
        return {
           id:0
        };
    },

    props:['detailItem'],

    methods: {
        
        goArticle(){
            // 当你点击的路由与当前路由不同时，那就跳转到新路由
            if(this.$route.path != `/article/${this.detailItem.id}`){
               this.$router.push(`/article/${this.detailItem.id}`)

                this.id = this.detailItem.id

                this.$emit("sendId",this.id)
                
            }

            
        }
    },

    components:{
        
    },


    }
</script>


<style scoped lang="less">
    
    .count{
        padding:0 2.133vw;
        display: flex;
        justify-content: space-between;
        background-color: #fff;

        .praise_num{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .paly_num{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .title{
        background-color: #fff;
        margin:0;
        height: 12vw;
        padding-top:1.333vw;
        margin-top: -1.333vw;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

</style>